<template>
  <div>
    <el-carousel indicator-position="none" height="400px" arrow="nerver" :interval="5000">
      <el-carousel-item v-for="item in carousel.urls" :key="item">
        <div class="item-box">
          <img :src="item" class="carimg" />
          <div class="desc-box">
            <h1>{{ carousel.title }}</h1>
            <p>{{ carousel.desc }}</p>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <el-row :gutter="20">
      <el-col :span="20" :offset="2">
        <el-card v-for="article in pageInfo" :key="article.id">
          <div slot="header">
            <router-link class="main-text" :to="'/article/detail/' + article.id" v-html="article.title"></router-link>
            <div class="article-info">
              <el-tag effect="dark" size="mini">原创</el-tag>
              浏览量：{{ article.views }} 分类：
              <router-link class="link secondary-text" :to="'/category/' + article.category">{{ article.category
              }}</router-link>
            </div>
          </div>
          <div class="tabloid">{{ article.tabloid }}</div>
          <i class="el-icon-user-solid article-icon">{{ article.author }}</i>
          <i class="el-icon-date article-icon">{{ article.gmtCreate }}</i>
        </el-card>
      </el-col>

    </el-row>
  </div>
</template>
  
<script setup >
import { ref, reactive, onMounted } from 'vue'
import { getArticles } from '@/api/music/music.ts'

const carousel = reactive({
  title: "竹林客栈",
  desc: "分享知识，分享生活，分享感动",
  urls: [
    "https://tvax1.sinaimg.cn/mw1024/bfe05ea9ly1fxgu8jys3fj21hc0u0k0j.jpg",
    "https://tvax1.sinaimg.cn/large/bfe05ea9ly1fxgunx09dtj21hc0u0q81.jpg",
    "https://tvax1.sinaimg.cn/large/bfe05ea9ly1fxgv2t92yyj21hc0u0qb9.jpg"
  ]
})
const article = ref({
  id: '',
  title: "",
  //浏览量
  views: "",
  category: "",
  tabloid: "",
  author: "",
  gmtCreate: "",
})

const pageInfo = ref([]) 

const data = ref([
  {
    id: '1',
    title: "周杰伦居然干出这种事？",
    //浏览量
    views: "11",
    category: "音乐资讯",
    //文章文案
    tabloid: "据报道",
    author: "root",
    gmtCreate: "2024.01.23",
  },
  {
    id: '2',
    title: "2",
    //浏览量
    views: "2",
    category: "2",
    tabloid: "22",
    author: "2",
    gmtCreate: "2",
    tags: "2"
  }
])

onMounted(() => 
  getArticles().then(res => {
    pageInfo.value=res.rows
    console.log(pageInfo.value)
  }))

</script>

<style scoped>
.item-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.carimg {
  width: 100%;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
}

.desc-box {
  position: absolute;
  bottom: 0;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 40px;
  margin-left: -250px;
  margin-top: -20px;
  text-align: center;
}

.el-card {
  margin-top: 20px;
}

.article-info {
  margin-top: 10px;
  color: #909399;
  font-size: 13px;
}

.article-icon,
.article-icon .tag {
  color: #909399;
  font-size: 13px;
  margin-right: 10px;
  text-decoration: none;
}

.article-icon .tag:hover {
  color: #409eff;
  cursor: pointer;
}

.tabloid {
  color: #606266;
  font-size: 14px;
  margin-bottom: 10px;
}
</style>
 